<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>D3交互式数据可视化</title>
		<style>
			.axis path,
			.axis line{
				fill: none;
				stroke: black;
				shape-rendering: optimizeSpeed;
			}
			.axis text{
				font-size: 12px;
				font-family: sans-serif;
			}
			.xaxis text{
				transform: rotate(-45deg);
			}
			.line{
				margin:50px auto;
				width: 500px;
				height: 500px;
				box-sizing: border-box;
				border:1px solid skyblue;
			}
		</style>
	</head>
	<body>
		<div class="line">
			
		</div>
		<script src="js/d3_3.5.7.js"></script>
		<script>
			var width = 500;
			var height = 500
			var svg = d3.select(".line").append('svg').attr({"width":width,"height":height});
			var dataset = [
				{
					country:"china",
					gdp:[]
				},
				{
					country:"japan",
					gdp:[]
				}
			]
			//创建随机数据
			for(var i = 0;i < 2;i++) {
				var gdp = [];
				for(var j = 0;j < 14;j++) {
					var first = 2000 + j;
					var second = Math.floor(Math.random() * 10000 + 500);
					gdp.push([first,second]);
				}
				dataset[i].gdp = gdp;
			}
			//创建间距
			var padding = {top:50,right:50,left:50,bottom: 50};
			//获取数据中最大值
			function getMax() {
				var gdpMax = 0;
				var dataLen = dataset.length;
				for(var i = 0;i < dataLen;i++) {
					var currGdp = d3.max(dataset[i].gdp,function(d) {
						return d[1];
					})
					return gdpMax = (currGdp > gdpMax) ?currGdp : gdpMax;
				}
			}
			//根据数据项得出x轴的定义域
			function getXDomain() {
				var xDomain = [];
				var xmin = d3.min(dataset[0].gdp,function(d) {
					return d[0];
				});
				var xMax = d3.max(dataset[0].gdp,function(d) {
					return d[0];
				});
				return xDomain = [xmin,xMax];
			}
			
			//创建x轴比例尺
			var xScale = d3.scale.linear()
							.domain(getXDomain())  //简化了
							.range([0,width - padding.left - padding.right]);
			var yScale = d3.scale.linear()
							.domain([0,getMax() * 1.11])//使图形不在坐标轴的边界绘制
							.range([height - padding.top - padding.bottom,0])
			//创建直线生成器
			var linePath = d3.svg.line()
							.x(function(d) {
								return xScale(d[0]);
							})
							.y(function(d) {
								return yScale(d[1]);
							})
			//定义两个颜色			
			var colors = [d3.rgb(0,0,255),d3.rgb(0,255,0)];
			//添加路径
			svg.selectAll("path").data(dataset).enter().append("path")
					.attr("transform","translate(" + padding.left + "," + padding.top +")")
					.attr("d",function(d) {
						return linePath(d.gdp)
					})
					.attr({"fill":"none","stroke-width":3})
					.attr("stroke",function(d,i) {
						return colors[i]
					})

			//添加x轴
			var xAxis = d3.svg.axis()
								.scale(xScale)
								//.ticks(5)
								.tickFormat(function(d) {
									return d + "年"
								})
								.orient("bottom")
								.tickSize(6,8)
			//添加y轴
			var yAxis = d3.svg.axis()
							.scale(yScale)
							.orient("left");

		svg.append("g").attr("class","xaxis axis").attr("transform","translate("+padding.left +","+(height-padding.bottom)+")").call(xAxis);
		svg.append("g").attr("class","yaxis axis").attr("transform","translate("+padding.left +","+padding.top+")").call(yAxis);

		</script>
	</body>
</html>